<template>
  <div :class="['todo-item', todo.completed ? 'completed' : '']">
    <input type="checkbox" v-model="todo.completed"/>
    <label>{{ todo.content }}</label>
    <button @click="delItem"></button>
  </div>
</template>

<script>
  export default {
    name: "TodoItem",
    props: {
      todo: Object
    },
    methods: {
      delItem() {
        this.$emit('del', this.todo.id)
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~styles/theme.styl'
@import '~styles/mixins.styl'
.todo-item
  display flex
  justify-content space-between
  padding 10px
  font-size 28px
  border-top 1px solid rgba(0, 0, 0, 0.1)
  vertical-align middle

  &:hover
    button:after
      content 'x'
      font-size 24px
      color $pinkish
      cursor pointer

  &.completed
    label
      text-decoration line-through
      color lightgrey
      font-style italic

  input
    width 50px
    height 28px
    text-align center
    cleanDefaultStyle()

    &:after
      content url('~images/unchecked.svg')

    &:checked:after
      content url('~images/checked.svg')

  label
    vertical-align middle
    flex 1
    transition color 0.7s

  button
    width 40px
    background-color transparent
    cleanDefaultStyle()
    cursor poiner

</style>